/**
 * @author:linjiye
 * @date: 2024/12/30
 * @desc:
 **/

import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import React, {ReactElement, useState} from 'react'
import PageTopBackBtn from "@/components/PageTopBackBtn";
import {LinearGradient} from "expo-linear-gradient";
import Animated from 'react-native-reanimated';

type Props = {
    left: ReactElement
    content: ReactElement
    right: ReactElement
    title: string
    style?:object
    titleStyle?: object
}

const PageTabBar = ({ left,content,right,title,style, titleStyle }: Props) => {

    return (
        <View style={[styles.container, style]}>
            {
                left && <View style={styles.left}>{left}</View>
            }
            {
                !left &&  <PageTopBackBtn/>
            }
            {
                content && !title && <View style={styles.content}>{content}</View>
            }
            {
                title && <View style={styles.content}>
                    <Text style={[{width: '55%',textAlign: 'center',fontSize: 17,fontWeight: 600,fontFamily:'Source Han Sans'}, titleStyle]} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
                </View>
            }
            {
                right && <View style={styles.right}>{right}</View>
            }
        </View>
    )
}

export default PageTabBar

const styles = StyleSheet.create({
    container:{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        position: 'relative'
    },
    left: {
        position: "relative",
        zIndex: 100,
    },
    content: {
        position: "absolute",
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
        display: 'flex',
        justifyContent: 'center',
        alignItems: "center",
        color: 'rgba(0, 0, 0, 0.9)'
    },
    right: {
        paddingRight: 16,
        position: "relative",
        zIndex: 100,
    }
})